<template>
  <div
    class="w-100% h-100% overflow-auto flex flex-col items-center justify-around transition-all-1000" 
    dark="bg-[rgba(0,0,0,0)]"
  >
    <template v-for="(item, index) in navList.data" :key="index">
      <div
        v-if="item.type === 'line'"
        class="w-60px h-70px flex justify-center items-center"
      >
        <div class="w-100% h-5px bg-[#e6e6e6] rounded-5px" ></div>
      </div>
      <div
        v-else-if="item.type === 'null'"
        class="w-70px h-70px"
      >
        <!-- <div class="w-100% h-5px bg-[#e6e6e6] rounded-5px" ></div> -->
      </div>
      <div
        v-else
        class="w-70px h-70px bg-[#f7fcff] rounded-10px transition-all-1000 cursor-pointer"
        flex
        justify-center
        items-center
        @click="handleNav(item)"
      >
        <div
          :class="[{
            '!bg-[#0fa7f5]': item.name === navList.activateName,
          },item.icon]"
          class="w-30px h-30px !transition-all-0"
          dark="bg-[#18181c]"
        >
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import router from "../../router";


interface iNav{
  id: number,
  name: string
  type: string
  text: string
  icon: string
  path: string
}

let navList = reactive({
  activateName: "dashboard",
  data: [
    {
      id: 1,
      name: "dashboard",
      type: "nav",
      text: "仪表盘",
      icon: "i-ant-design-dashboard-filled",
      path:"/index/dashboard"
    },
    {
      id: 2,
      name: "memorandum",
      type: "nav",
      text: "备忘录",
      icon: "i-bxs-memory-card",
      path:"/index/memorandum"
    },
    // {
    //   id: 3,
    //   name: "reminders",
    //   type: "nav",
    //   text: "提醒事项",
    //   icon: "i-icon-park-solid-remind",
    //   path:"/index/reminders"
    // },
    {
      id: 4,
      name: "calendar",
      type: "nav",
      text: "日历",
      icon: "i-ant-design-calendar-filled",
      path:"/index/calendar"
    },
    {
      id: 3,
      name: "reminders",
      type: "null",
      text: "提醒事项",
      icon: "i-icon-park-solid-remind",
      path:"/index/reminders"
    },
    { id: 5, name: "line", type: "line" },
    {
      id: 6,
      name: "setting",
      type: "nav",
      text: "设置",
      icon: "i-ant-design:setting-filled",
      path:"/index/setting"
    },
  ] as iNav[],
});


let handleNav = (item: iNav) => {
  navList.activateName = item.name;
  routerPath(item.path)
};
let routerPath = (path:string)=>{
  router.push({
    path:path
  })
}


let initWatch = ()=>{
  const router = useRouter();
  console.log(router.currentRoute.value);
  
  navList.activateName = router.currentRoute.value.name?.toString()!
}

onMounted(()=>{
  initWatch()
})

</script>

<style>
</style>
